<template>
  <div class="media-input">
    <Tabs 
      :tabs="tabs" 
      v-model:value="type" 
      :tabsStyle="{ marginBottom: '15px' }" 
    />

    <template v-if="type === 'frame'">
      <Input v-model:value="frameSrc" :placeholder="$t('frame.webPlaceholder')"></Input>
      <div class="btns">
        <Button @click="emit('close')" style="margin-right: 10px;">{{ $t('frame.cancel') }}</Button>
        <Button type="primary" @click="insertFrame()">{{ $t('frame.confirm') }}</Button>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import Button from '@/components/Button.vue'
import Input from '@/components/Input.vue'
import Tabs from '@/components/Tabs.vue'
import message from '@/utils/message'
import i18next from 'i18next'
import { ref } from 'vue'

const { t } = i18next

type TypeKey = 'frame'
interface TabItem {
  key: TypeKey
  label: string
}

const emit = defineEmits<{
  (event: 'insertFrame', payload: string): void
  (event: 'close'): void
}>()

const type = ref<TypeKey>('frame')

const frameSrc = ref('')

const tabs: TabItem[] = [
  { key: 'frame', label: t('frame.label') },
]

const insertFrame = () => {
  if (!frameSrc.value) return message.error(t('frame.webMsg'))
  emit('insertFrame', frameSrc.value)
}
</script>

<style lang="scss" scoped>
.media-input {
  width: 480px;
}
.btns {
  margin-top: 10px;
  text-align: right;
}
</style>
